<template>
  <el-card style="margin-top: 30px;">
    <div slot="header" class="clearfix">
      <span>警告日志</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="init">刷新</el-button>
    </div>
    <a-spin :spinning="loading">
      <el-table
        :data="tableData"
        style="width: 100%;"
        :height="height"
        :max-height="height"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="createTime"
          label="时间"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="logType"
          label="类型"
          align="center"
          :formatter="formatterState"
          width="180">
        </el-table-column>
        <el-table-column
          prop="logMessage"
          align="center"
          label="详情">
        </el-table-column>
      </el-table>
      <pagination
        :small="true"
        v-show="total>0"
        :total="total"
        :autoScroll="false"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="init"
      />
    </a-spin>
  </el-card>
</template>

<script>
  import {
    overallLogList
  } from '@/api/system'
  export default {
    name: "cardTable",
    props: {
      height: {
        type: Number,
        default: 380
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        console.log(rowIndex)
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        }
        return '';
      },
      async init() {
        this.loading = true;
        const res = await overallLogList(this.queryParams);
        this.loading = false;
        this.total = res.total
        this.tableData = res.rows || [];
      },
      formatterState(row) {
        const { logType } = row;
        return (logType && this.state[logType]) || '未知'
      }
    },
    data() {
      return {
        tableData: [],
        loading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 30
        },
        state: {
          '1': 'CPU',
          '2': '内存',
          '3': '磁盘',
        }
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: rgba(202, 215, 252, 0.2);
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
